<script setup>
import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { Space } from 'ant-design-vue';

import { mqttDeviceInfo } from '#/api/iot/device/manage';

const mqttInfoByDevice = ref({});

const [MqttDrawer, MqttDrawerApi] = useVbenDrawer({
  async onOpenChange(isOpen) {
    if (isOpen) {
      const { deviceId } = MqttDrawerApi.getData();
      mqttInfoByDevice.value = await mqttDeviceInfo({
        deviceId,
      });
    }
  },
});
</script>

<template>
  <MqttDrawer title="MQTT 连接参数" :footer="false">
    <Space direction="vertical">
      <div>
        <span>服务器地址（hostUrl）:</span>
        <span>{{ mqttInfoByDevice.host }}</span>
      </div>
      <div>
        <span>端口（port）:</span>
        <span>{{ mqttInfoByDevice.port }}</span>
      </div>
      <div>
        <span>Client Id（clientId）:</span>
        <span>{{ mqttInfoByDevice.clientId }}</span>
      </div>

      <div>
        <span>用户名（username）:</span>
        <span>{{ mqttInfoByDevice.username }}</span>
      </div>

      <div>
        <span>密码（password）:</span>
        <span>{{ mqttInfoByDevice.password }}</span>
      </div>
    </Space>
  </MqttDrawer>
</template>

<style lang="scss" scoped></style>
